<template>
  <div class="container">
    <!-- 批次、日龄区间 -->
    <el-form ref="ruleform" :model="ruleform" :inline="true" class="form">
      <el-form-item label="批次号" prop="batch" label-width="60px">
        <el-select v-model="ruleform.batch" placeholder="请选择批次">
          <el-option label="批次一" value="one" />
          <el-option label="批次二" value="two" />
        </el-select>
      </el-form-item>
      <el-form-item label="日龄区间" prop="dayAge" label-width="80px">
        <el-select v-model="ruleform.dayAge" placeholder="请选择区间">
          <el-option label="46 - 60 周" value="1" />
          <el-option label="31 - 45 周" value="2" />
          <el-option label="16 - 30 周" value="3" />
          <el-option label="01 - 15 周" value="4" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="$refs['ruleform'].resetFields()">重置</el-button>
        <el-checkbox v-model="isShowEgg" style="margin-left:15px;">
          产蛋数据
        </el-checkbox>
      </el-form-item>
    </el-form>
    <!-- 表格头部 -->
    <div class="header">
      <span>{{ '五舍' }}</span>
      <span>{{ '品种：海蓝白，出雏日2022.8.27' }}</span>
      <span>{{ '饲养员：xxx' }}</span>
      <span>{{ '舍号：5' }}</span>
    </div>
    <!-- 表格 -->
    <BaseTable :table-data="tableData" :is-show="isShowEgg" max-height="500" />
    <!-- 分页 -->
    <el-pagination
      align="right"
      background
      :current-page="currentPage"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="prev, pager, next,total, sizes, jumper"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script>
import BaseTable from '../../components/BaseTable'
import { getTableData } from '../../api'
export default {
  name: 'QueryData',
  components: { BaseTable },
  data() {
    return {
      isShowEgg: true, // 显示产蛋字段
      ruleform: {
        batch: '',
        dayAge: ''
      },
      currentPage: 4, // 分页当前页
      tableData: [] // table数据
    }
  },
  mounted() {
    // 获取表格数据
    getTableData().then(res => {
      const { list } = res.data
      this.tableData = list
    })
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  padding: 5px;

  .form {
    height: 40px;
    margin: 5px 0;
  }

  .header {
    display: flex;
    justify-content: space-around;
    background-color: rgb(240, 240, 240);
    padding: 5px;
    font-weight: 600;
  }

  /* background-color: rgb(240, 242, 245); */
  ::v-deep.el-table thead.is-group th,
  td,
  tr {
    background-color: rgb(240, 240, 240);
    color: black;
  }
}

.sort-caret.ascending {
  border-bottom-color: #9d9d9d57;
}

.sort-caret.ascending {
  border-bottom-color: #84848462;
}

::v-deep th.gutter {
  color: red !important;
  width: 0;
  display: none;
}

.el-pagination {
  padding: 10px 50px;
  background-color: white;
}
</style>
